<% desktop ||= false %>

<% cache [*spree_storefront_base_cache_scope.call(product), images, desktop].compact do %>
  <% if desktop == true %>
    <div
      class="media-gallery w-full h-full media-gallery-desktop"
      id="media-gallery-<%= product.id %>-desktop"
      data-controller="lightbox pdp-desktop-gallery">
      <div class="grid grid-cols-[6.5rem_1fr] grid-rows-1 gap-2 w-full media-gallery-desktop__wrapper">
        <div class="flex flex-col h-full overflow-hidden">
          <%= button_tag class: "w-full bg-background py-2 flex justify-center items-center disabled:opacity-50 media-gallery-desktop-arrow", data: { pdp_desktop_gallery_target: "prevArrow" } do %>
            <span class="rotate-180">
              <%= render 'spree/shared/icons/chevron_down' %>
            </span>
          <% end %>
          <div class="swiper h-full block" data-pdp-desktop-gallery-target="imagesThumbsSlider">
            <div class="swiper-wrapper h-full block">
              <% images.each do |image| %>
                <div class="swiper-slide !h-min cursor-pointer">
                  <div
                    class="relative aspect-1 w-full block "
                    id="thumb-desktop-product-image-<%= image.id %>"
                    data-turbo-permanent>
                    <%= spree_image_tag(image, variant: :small, alt: image_alt(image), class: 'w-full h-full') %>
                  </div>
                </div>
              <% end %>
            </div>
          </div>
          <%= button_tag class: "w-full bg-background py-2 flex justify-center items-center disabled:opacity-50 media-gallery-desktop-arrow", data: { pdp_desktop_gallery_target: "nextArrow" } do %>
            <%= render 'spree/shared/icons/chevron_down' %>
          <% end %>
        </div>
        <div data-pdp-desktop-gallery-target="imagesSlider" class="overflow-hidden swiper relative w-full h-min">
          <div class="swiper-wrapper w-full h-min">
            <% images.each do |image| %>
              <div class="swiper-slide w-full">
                <div
                  class="product-image relative w-full aspect-1"
                  id="main-desktop-product-image-<%= image.id %>"
                  data-turbo-permanent>
                  <%= link_to spree_image_url(image, variant: :xlarge), data: { pswp_width: "2000", pswp_height: "2000" } do %>
                    <div class="zoom-icon hidden absolute bottom-2 right-2 p-4 bg-background rounded-full opacity-75 hover:opacity-100">
                      <%= render 'spree/shared/icons/zoom' %>
                    </div>
                    <%= spree_image_tag(image, variant: :xlarge, alt: image_alt(image), class: 'w-full h-full') %>
                  <% end %>
                </div>
              </div>
            <% end %>
          </div>
          <%= render 'spree/products/label', product: product %>
          <div data-pdp-desktop-gallery-target="imagesSliderPagination" class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  <% else %>
    <!-- media gallery for mobile -->
    <% if images.any? %>
      <div
        id="media-gallery-<%= product.id %>-mobile"
        data-controller="lightbox carousel"
        class="media-gallery swiper-container relative overflow-hidden"
        data-carousel-options-value='{
        "slidesPerView": 1,
        "centeredSlides": true,
        "spaceBetween": 10,
        "grabCursor": true
      }'>
        <div class="swiper-wrapper">
          <% images.each do |image| %>
            <div class="swiper-slide aspect-1" id="swiper-slide-<%= image.id %>">
              <%= link_to spree_image_url(image, variant: :xlarge), class: "absolute top-2 right-2 p-2 bg-background rounded-full opacity-75 hover:opacity-100", data: { pswp_width: "2000", pswp_height: "2000" } do %>
                <%= render 'spree/shared/icons/zoom' %>
              <% end %>
              <%= render 'spree/products/label', product: product, mobile_pdp: true %>
              <%= spree_image_tag(image, variant: :large, alt: image_alt(image), class: 'h-full w-full object-cover object-center', style: 'min-height: 358px') %>
            </div>
          <% end %>
        </div>
        <% if images.length > 1 %>
          <div class="swiper-pagination-product-<%= product.id %> mt-3 items-center flex mx-auto align-center justify-center" data-carousel-target="pagination"></div>
        <% end %>
      </div>
      <div id='pinch-to-zoom' class='fixed top-0 left-0 p-4 bg-background z-50 flex justify-center items-center flex-col'>
        <div class='w-14 h-14'><%= render 'spree/shared/icons/pinch' %></div>
        <div class='text-sm uppercase pt-4 px-5 text-center !leading-tight'>
          <%= Spree.t("storefront.products.pinch_to_zoom_html") %>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>
